<template>
  <div class='list bc-gray'>
    <ul>
      <li v-for="(item, index) in listData" :key="index" class="bc-white pr active" @click="showDetail(item,index)">
        <p class="title"><span class="color-blue">{{item.classify==='会议讲座'?'会议讲座':'普通消息'}}</span><span>来自{{item.name}}</span></p>
        <p class="content">[主题] {{item.title}}</p>
        <p class="info">{{item.content}}</p>
        <p class="info more"><span>{{item.addtime}}</span><span class="fr">共{{item.count}}人,{{item.count-item.unreceive}}已收到</span></p>
        <span :class="{pa:true,'color-yellow':item.status==1,'color-green':item.status==0}">{{item.status === 1?"已结束":"进行中"}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['listData','routerDetail'],
  components: {},
  name: "",
  data() {
    return {};
  },
  methods: {
    showDetail(item){
      this.routerDetail(item)
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.list {
  li{
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;

    .title{
      font-size: 16px;

      .color-blue{
        margin-right: 20px;
      }
    }
    .content{
      font-size: 17px;
    }
    .info{
      font-size: 12px;
      color: #666;
      margin-top: 8px;
    }

    span.pa{
      top: 0;
      right: 10px;
      padding: 5px 10px;
    }
    .color-yellow{
      color: #f5a623;
      background:rgba(245,166,35,0.2);
    }
    .color-green{
      color: #7ed321;
      background:rgba(126,211,33,0.2);
    }
  }
}
</style>